<template>
  <div class="body">
    <div class="main" >
      <Header :navList="navList"/>
      <div class="content">
        <!-- 专题 -->
        <Theme :ztwzList="ztwzList"/>
        <!-- 新闻 -->
        <News :ywList="ywList"/>
        <!-- 大队新闻 -->
        <TeamNews :orgList="orgList" :noticeList="noticeList"/>
        <!-- 快速入口 -->
        <Entrance :ksrkList="ksrkList"/>
        <!-- 光荣榜 -->
        <Honor :honorRollList="honorRollList"/>
        <!-- 机关动态 -->
        <Organization :jgdtList="jgdtList" :xsmkList="xsmkList"/>
        <!-- 综合展示 -->
        <Synthesize :zhzsList="zhzsList" :imgCollList="imgCollList"/>
        <!--        <Gallery :imgCollList="imgCollList" />-->
        <!-- 专题栏目 -->
        <Columns :ztzlList="ztzlList"/>
      </div>
      <Footer/>
    </div>
  </div>
</template>

<script>
// import News from "./News";
// import SchoolNews from "./SchoolNews";
// import Hall from "./Hall";
// import Work from "./Work";
// import Synthesis from "./Synthesis";
// import Topic from "./Topic";
// import MarqueeText from 'vue-marquee-text-component'
// import Title from "@/components/Title.vue";
import { getList, getMessageListApi, getYwListApi, refreshApi } from "@/api/home";
// import Nav from "@/templates/Nav";
import Header from "@/templates/Layout/Header.vue";
// import Content from "@/templates/Layout/Content.vue";
import Footer from "@/templates/Layout/Footer.vue";
import Theme from "./Theme.vue";
import News from "./News.vue";
import TeamNews from "./TeamNews.vue";
import Entrance from "./Entrance.vue";
import Honor from "./Honor.vue";
import Synthesize from "./Synthesize.vue";
// import Gallery from "./Gallery.vue";
import Columns from "./Columns.vue";
import Organization from "./Organization.vue";
import { getBubbleSort } from "@/util/util";
// import './layout.css'

export default {
  components: {
    Header,
    // Content,
    Footer,
    Theme,
    News,
    Entrance,
    Honor,
    Synthesize,
    Columns,
    // Gallery,
    TeamNews,
    Organization
  },
  data() {
    return {
      // navList: [],
      notice: [],
      news: [],
      title: '',
      show: true,

      // slogan: {
      //   height: '130px',
      //   background: '#67C23A',
      //   margin: '40px 0',
      //   cursor: 'pointer'
      // },

      honor: [],
      imgCollList: [],
      frontModel: [],
      noticeList: [],
      ywList: [],
      ztwzList: [],
      zhzsList: [],
      orgList: [],
      honorRollList: [],
      ksrkList: [],
      jgdtList: [],
      imgList: [],
      ztzlList: [],
      xsmkList: [],
      navList: [],
      page: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      await refreshApi()
      const res = await getList()
      const message = await getMessageListApi(this.page)
      const yw = await getYwListApi()
      this.frontModel = res.frontModel
      // this.navList = res.navList
      this.ztwzList = res.ztwzList
      this.imgCollList = res.imgList
      this.honorRollList = res.honorList
      this.noticeList = res.noticeList
      this.ywList = yw
      this.zhzsList = res.zhzsList
      this.orgList = res.orgList
      this.ksrkList = res.ksrkList
      this.jgdtList = res.jgdtList
      this.ztzlList = res.ztzlList
      this.xsmkList = res.xsmkList
      this.navList = this.getNavBarList(res.navList, res.orgList)
      this.getNotification(message)
      this.$nextTick(() => {

      });
      this.show = false
    },
    getNavBarList(nav, org) {
      // console.log('nav', nav)
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      // const a = getBubbleSort(nav[0].children)
      return nav[0].children.sort(getBubbleSort('order', 1))
    },
    getNotification(message) {
      message.records.forEach(item => {
        setTimeout(() => {
          this.$notify({
            title: item.name,
            dangerouslyUseHTMLString: true,
            message: item.bgImg ? `<div><img src=${ item.bgImg } style="width: 140px;height: 100px;object-fit: cover;" alt="" /></div>` : `<div>${ item.content }</div>`,
            position: item.location === 1 ? 'bottom-right' : item.location === 2 ? 'bottom-left' : item.location === 3 ? '' : item.location === 4 ? 'bottom-left' : 'bottom-right',
            customClass: 'customClass',
            duration: 0,
            offset: 100,
            onClick() {
              window.open(item.outHref);
            }
          });
        }, 100)
      })
    },
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  flex: 1;
}

</style>
